<template>
  <div class="horizontal-input">
    <span
      v-for="(item, index) in arr"
      :key="index"
    >
      <span v-if="item">{{ item }}</span>
      <span
        v-if="index < arr.length - 1"
        :contenteditable="!disabledProp"
        class="span-input"
        @input="onInput($event, index)"
        @keydown="onSpanInput"
      >
        {{ inputValue[index] }}
      </span>
    </span>
  </div>
</template>

<script setup name="HorizontalInput" lang="ts">
import { onBeforeMount, onMounted, ref, toValue, watch } from "vue";
import { formEmits, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";

const props = defineProps({
  input: {
    type: String,
    default: ""
  },
  value: {
    type: [Object, Array],
    default: () => {}
  }
});

const emits = defineEmits(formEmits);

const { changeValue, disabledProp } = useFormItem(props, emits);

const arr = ref<string[]>([]);

const inputValue = ref();

onBeforeMount(() => {
  console.log(props.value);
  inputValue.value = JSON.parse(JSON.stringify(props.value));
});

const initInputValueArr = () => {
  arr.value = props.input.split("$input");
};

// 生成输入框
watch(
  () => props.input,
  () => {
    initInputValueArr();
  },
  {
    immediate: true,
    deep: true
  }
);

const onSpanInput = (el: any) => {
  if (el.keyCode === 13) {
    el.preventDefault();
    return false;
  }
};

const onInput = (el: any, index: number) => {
  const { offsetWidth, innerText } = el.target;
  console.log(offsetWidth);
  if (offsetWidth > 80) {
    el.target.classList.add("span-input-inline");
  } else {
    el.target.classList.remove("span-input-inline");
  }
  changeValue.value[`${index}`] = innerText;
};
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #606266 !important;
  border-radius: 0px !important;
}

.horizontal-input {
  color: #606266;
  padding: 10px;

  .span-input {
    display: inline-block;
    min-width: 80px;
    border-bottom: 1px solid;
    padding: 0 5px;
    margin-right: 10px;
    line-height: 1;
  }

  .span-input-inline {
    display: inline;
  }
}
</style>
